<template>
  <el-menu mode="horizontal" class="navMenu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
    default-active="0">
    <div class="navMenuTitle">
      <el-image
      class="navMenuTitleImage"
      style="width: 4vw; height: auto"
      :src="titleList[0].navigationIcon"></el-image>
      <h3 style="color: aliceblue;">{{titleList[0].navigationTagName}}</h3>
    </div>
    <el-menu-item class="navMenuItemFather" v-for="(item, index) in menuList" :index="index" :key="index" :itemData="item" @click="handleSelect(item.navigationRouter)">
      <div :to="item.navigationRouter" class="navMenuItemSon">
      <el-image style="width: 30%; height: 30%;" :src="item.navigationIcon"></el-image><span class="navigationTagName">{{ item.navigationTagName}}</span>
      </div>
      </el-menu-item>
    
  </el-menu>
</template>


<script>
import { getNavigationList } from "@/api/blog/blogNavigation";
export default {
  data() {
    return {
      queryParams: {
        //类型为1的代表是顶部导航
        navigationType: 1
      },
      menuList: [],
      titleList: []
    };
  },
  //生命周期：挂载完成
  mounted() {
    this.getNavigationList();
    this.getNavigationTitle();
  },
  methods: {
    getNavigationList() {
      getNavigationList(this.queryParams).then(response => {
        this.menuList = response.data
      })
    },
    getNavigationTitle() {
      getNavigationList({navigationType: 2}).then(response => {
        this.titleList = response.data
      })
    },
    handleSelect(path) {
      this.$router.push(path)
    }
  }
}
</script>
<style>
.navMenu {
  display: flex;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  justify-content: space-between;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  width: 98.9%;
  height: 8%;
  opacity: 0.8;
  transition: opacity 0.5s ease;
  overflow: hidden;
}
/* .navMenu:hover{
  opacity: 0.9;
} */
.navMenuTitle{
  display: flex;
  gap: 15px;
  width: 40%;
}
.navMenuItemFather{
  height: 100%;
}
.navMenuItemSon{
  height: 100%;
  display: flex;
  gap: 3px;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.navigationTagName{
  font-size:larger;
  font-weight: bold;
}
@keyframes rotate-image {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 应用动画到 el-image 上，让图片持续旋转 */
.navMenuTitleImage:not(.navMenuItemSon) {
  animation: rotate-image 5s linear infinite; /* 动画名称、持续时间、速度曲线、循环次数 */
}
</style>